<template>
	<view id="container">
		<cover-view style="position: absolute; bottom: 15px; right: 15px;" id="add-answer" @tap="handleAnswerAdd">
			我要回答
		</cover-view>
		<view id="question-container">
			<h2>问题</h2>
			<view class="line"></view>
			<rich-text :nodes="questionData.content">	
			</rich-text>
		</view>
		<view id="answer-container">
			<h2>回答列表</h2>
			<view class="answer-item" v-for="item in questionData.answerList">
				<rich-text  :nodes="item.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionData: {
					content: `'<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'`
				},
				questionId: null,
			}
		},
		methods: {
			getQuestionData(key) {
				this.$api.questionGet(key).then(res => {
					console.log(res)
					this.questionData = res;
				})
			},
			handleAnswerAdd() {
				uni.redirectTo({
					url: '../answerAdd/answerAdd?questionId=' + this.questionId,
				})
			}
		},
		onLoad(option) {
			console.log(option);
			this.questionId = option.questionId;
			this.getQuestionData(this.questionId);
		},

	}
</script>

<style scoped>
	#container {
		width:100%;
	}
	#question-container{
		width:100%;
		border-bottom: 2px solid #9BDBDB;
	}
	.line {
		height:5px;
		width: 100%;
		background-color: #9BDBDB;
	}
	#answer-container{
		width: 100%;
	}
	.answer-item {
		border-bottom: 2px solid #9BDBDB;
	}
	#add-answer{
		width: 100px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		border-radius: 10px;
		background-color: rgba(155,219,219, 0.8);
	}
</style>
